<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.3.0/weui.min.css"/>
<title>例子</title>
<style>
	body{
		margin: 5px;
	}
	.i{font-size:40px;width:60px}
	.i2{font-size:40px;width:100px}
</style>
</head>
<body>
<div>
	<div id="mainmenu">
	<br/>
		<a href="javascript:add_base(add_invoke_10);"	class="weui_btn weui_btn_primary">	十以内加法</a>
		<a href="javascript:add_base(add_invoke_20);"	class="weui_btn weui_btn_warn">		二十以内加法</a>
		<a href="javascript:add_base(add_invoke_AA);"	class="weui_btn weui_btn_primary">	两位数加法</a>
		<a href="javascript:add_base(add_invoke_AAA);"	class="weui_btn weui_btn_warn">		三位数加法</a>
		<a href="javascript:sub_base(100);"				class="weui_btn weui_btn_primary">	一百以内减法</a>
		<a href="javascript:sub_base(1000);"			class="weui_btn weui_btn_warn">		一千以内减法</a>
		<a href="javascript:mul_base(10);"				class="weui_btn weui_btn_primary">	乘法口诀表联系</a>
	</div>
	
	<div id='mainpage' style='display:none;font-size:24px'>
		<div id="submenu">
			<div>
				已计算:<span id='t_right'></span>/<span id='t_all'></span>，正确:<span id='t_rate'></span>%
				<br/>您已练习<span id='t_hour'>00</span>:<span id='t_minute'>00</span>:<span id='t_second'>00</span>
			</div>
			<hr>
			<div>
				计算<span id='expressEle'></span>
				=<input id='inputEle' style='font-size:24px;border:0px;border-bottom:1px solid #ff0000;width:100px' type="text" value=" ">
			</div>
			<a href="javascript:input(1);" class="weui_btn weui_btn_mini weui_btn_plain_default i">1</a>
			<a href="javascript:input(2);" class="weui_btn weui_btn_mini weui_btn_plain_default i">2</a>
			<a href="javascript:input(3);" class="weui_btn weui_btn_mini weui_btn_plain_default i">3</a>
			<a href="javascript:input(4);" class="weui_btn weui_btn_mini weui_btn_plain_default i">4</a>
			<a href="javascript:input(5);" class="weui_btn weui_btn_mini weui_btn_plain_default i">5</a><br/>
			<a href="javascript:input(6);" class="weui_btn weui_btn_mini weui_btn_plain_default i">6</a>
			<a href="javascript:input(7);" class="weui_btn weui_btn_mini weui_btn_plain_default i">7</a>
			<a href="javascript:input(8);" class="weui_btn weui_btn_mini weui_btn_plain_default i">8</a>
			<a href="javascript:input(9);" class="weui_btn weui_btn_mini weui_btn_plain_default i">9</a>
			<a href="javascript:input(0);" class="weui_btn weui_btn_mini weui_btn_plain_default i">0</a>
			<br/>

			<a href="javascript:submitInput();" class="weui_btn weui_btn_mini weui_btn_primary i2">确定</a>
			<a href="javascript:resetInput();" class="weui_btn weui_btn_mini weui_btn_primary i2">重写</a>
			<a href="javascript:showMainMenu();" class="weui_btn weui_btn_mini weui_btn_primary i2">返回</a>
		</div>
		<hr/>
		<div id='result'>
			
		</div>
	</div>
</div>
<script type="text/javascript">
	var max=0,count_all=0,count_right=0;
	var expressFun;
	var evalFun;
	function input(v){
		inputEle.value+=v; 
	}
	var calcTimer=null,startTime=0,preHour=0,preMinute=0,preSecond=0;
	function resetInput(){inputEle.value=' '}
	function showMainPage(max1,expressFun1,evalFun1,max2){		
		mainmenu.style.display='none';
		mainpage.style.display='';
		max=max1;
		expressFun=expressFun1;
		evalFun=evalFun1;
		expressFun();
		count_all=0;
		count_right=0;
		t_all.innerText='0';
		t_right.innerText='0';
		result.innerHTML=''
		calcTimer=setInterval("updateTimes()",1000)
		startTime=new Date().getTime()/1000
	}
	function showMainMenu(){
		if(calcTimer!=0){
			clearInterval(calcTimer);
			calcTimer=null;
			preHour=0;preMinute=0;preSecond=0;
		}
		mainmenu.style.display='';
		mainpage.style.display='none';
	}
	var MINUTE=60,HOUR=60*MINUTE
	function updateTimes(){
		var t=new Date().getTime()/1000-startTime;
		var h=Math.round(t/HOUR),mm=t%HOUR;
		var m=Math.round(mm/MINUTE),s=Math.round(mm%MINUTE);
		if(h!=preHour){
			t_hour.innerText=h;preHour=h;
		}
		if(m!=preMinute){
			t_minute.innerText=m;preMinute=m;
		}
		t_second.innerText=s
	}


	function add_invoke_10(){
		var num1=gen(10);
		var num2=gen(10);
		var r= num1 + num2;
		while(r>10){
			 num1=gen(10);num2=gen(10);r= num1 + num2;
		}
		expressEle.innerText=num1+" + "+num2
	}
	function add_invoke_20(){
		var num1=genRegion(5,9);// 练习20以内加减法时主要考虑5-9这个价格数字的加减
		var num2=genRegion(1,9);
		var r= num1 + num2;
		while(r<=10){
			 num2=genRegion(1,9);r= num1 + num2;
		}
		expressEle.innerText=num1+" + "+num2
	}
	
	function add_invoke_AA(){
		var num1=genRegion(11,99);// 练习100以内加减法时主要考虑10以上数字
		var num2=genRegion(11,99);
		var r= num1 + num2;
		expressEle.innerText=num1+" + "+num2
	}
	function add_invoke_AAA(){
		var num1=genRegion(100,999);
		var num2=genRegion(100,999);
		var r= num1 + num2;
		expressEle.innerText=num1+" + "+num2
	}

	function sub_base_invoke(){	
		var num1=gen(max);
		var num2=gen(max);
		var r=num1-num2;
		if(r<0){r=num1;num1=num2;num2=r}
		expressEle.innerText=num1+" - "+num2
	}
	function mul_base_invoke(){
		var num1=gen(max);
		var num2=gen(max);
		expressEle.innerText=num1+" x "+num2
	}

	function submitInput(){
		var r1=evalFun();
		var r2=eval(inputEle.value);
		if(isNaN(r2))return;
		count_all++;
		if(r1==r2){
			result.innerHTML=expressEle.innerText+" = "+r2+"<br/>" +result.innerHTML// 记录结果
			count_right++;
		}else{
			result.innerHTML="<span style='color:red'>"+expressEle.innerText+" = "+r2+"(正确答案="+r1+")</span><br/>" +result.innerHTML// 记录结果
		}
		t_all.innerText=count_all;
		t_right.innerText=count_right;
		t_rate.innerText=Math.round(100*count_right/count_all);
		expressFun(max);
		resetInput();
	}

	function genRegion(start,end){
		return start+Math.round(Math.random()*(end-start));
	}

	function gen(max){
		var num=0;
		while(num==0){num=Math.floor(Math.random()*max);}
		return num;
	}
	function add_base(baseInvoke){
		showMainPage(0,baseInvoke,function(){return eval(expressEle.innerText)});
	}
	function sub_base(max1){
		showMainPage(max1,sub_base_invoke,function(){return eval(expressEle.innerText)});
	}
	function mul_base(max1){
		showMainPage(max1,mul_base_invoke,function(){return eval(expressEle.innerText.replace('x','*'))});
	}
</script>
</body>
</html>
